<template>
    <div class="app-container">
        <el-form @submit.native.prevent :model="queryParams" ref="queryForm" :inline="true" label-width="68px">
            <el-form-item label="公告标题" prop="noticeTitle">
                <el-input
                v-model="queryParams.noticeTitle"
                placeholder="请输入公告标题"
                clearable
                size="small"
                @keyup.enter.native="Getnoticemylist"
                />
            </el-form-item>
            <el-form-item>
                <el-button type="cyan" icon="el-icon-search" size="mini" @click="Getnoticemylist">搜索</el-button>
                <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
            </el-form-item>
            <el-form-item>
              <el-col :span="1.5">
                <el-button
                  type="danger"
                  icon="el-icon-delete"
                  size="mini"
                  :disabled="multiple"
                  @click="deletes"
                >删除</el-button>
                <el-button v-if="false"
                   type="danger"
                   icon="el-icon-delete"
                   size="mini"
                   :disabled="multiple"
                   @click="deletes"
                >删除全部</el-button>
              </el-col>
            </el-form-item>
        </el-form>

        <el-table
            v-loading="loading"
            :data="tableData"
            @selection-change="handleSelectionChange"
            style="width: 100%">
            <el-table-column type="selection" width="55" />
            <el-table-column
                prop="noticeTitle"
                label="标题"
            />
            <el-table-column
                prop="noticeTitle"
                label="类别"
                width="220"
            >
                <template slot-scope="scope">
                    {{scope.row.noticeType == 1 ? '普通公告' : '安全情报'}}
                </template>
            </el-table-column>
            <el-table-column
                width="200"
                prop="createTime"
                label="时间"
                >
            </el-table-column>
            <el-table-column
                width="200"
                label="状态">
                <template slot-scope="scope">
                    <el-tag v-if="scope.row.readState == 'unread'" type="danger" effect="plain">未读</el-tag>
                    <el-tag v-else type="info" effect="plain">已读</el-tag>
                </template>
            </el-table-column>
            <el-table-column label="操作" width="200" class-name="small-padding fixed-width">
                <template slot-scope="scope">
                <el-button
                    size="mini"
                    type="text"
                    @click="deletes(scope.row)"
                >删除</el-button>
                <el-button
                    size="mini"
                    type="text"
                    @click="details(scope.row)"
                >查看</el-button>
                </template>
            </el-table-column>
        </el-table>
        <pagination
            :total="total"
            :page.sync="queryParams.pageNum"
            :limit.sync="queryParams.pageSize"
            @pagination="Getnoticemylist"
        />
        <el-dialog
            v-if="dialogVisible"
            title="详情通知"
            :visible.sync="dialogVisible"
            width="60%"
            >
                <h1 style="text-align: center;">{{detailsData.noticeTitle || ''}}</h1>
                <h4 style="text-align: center;margin-top: 14px;">时间：{{ detailsData.createTime  || ''}}</h4>
                <el-divider></el-divider>
                <!-- <el-card style="height: 500px;overflow-y: auto;" :body-style="{ padding: '0px' }">
                </el-card> -->
                <div style="height: 500px;overflow-y: auto;padding:10px" v-html="detailsData.noticeContent || ''"></div>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">关 闭</el-button>
                <!-- <el-button type="primary" @click="dialogVisible = false">确 定</el-button> -->
            </span>
            <el-row v-if="detailsData.files.length>0" style="margin:10px 0">
                <el-col :span="2"><div class="grid-content bg-purple">附件：</div></el-col>
                <el-col :span="22">
                    <div v-for="(item,index) in detailsData.files" :key="index" @click="Download(item)" style="color:rgb(71,135,190);cursor: pointer;" class="grid-content bg-purple-light">{{item.fileName}}</div>
                </el-col>
            </el-row>
        </el-dialog>
    </div>
</template>
<script>
import { noticemylist,noticeread,systemnotice,noticeRead } from "@/api/system/notice";
export default {
    data(){
        return{
            // 遮罩层
            loading: true,
            // 选中数组
            ids: [],
            // 非单个禁用
            single: true,
            // 非多个禁用
            multiple: true,
            dialogVisible : false,
            // 查询参数
            queryParams: {
                pageNum: 1,
                pageSize: 10,
                noticeTitle : ''
            },
            tableData:[],
            total : 0,
            detailsData : '',
            base_url: process.env.VUE_APP_BASE_API,
        }
    },
    computed: {
        routerUrl(){
            return this.$route.path
        }
    },
    created(){
        this.Getnoticemylist()
    },
    watch:{
        routerUrl(val){
            if(val == '/system/noticelist'){
                this.Getnoticemylist()
            }
        }
    },
    methods:{
        // 多选框选中数据
        handleSelectionChange(selection) {
            this.ids = selection.map((item) => item.readId);
            this.single = selection.length != 1;
            this.multiple = !selection.length;
        },
        Download(item){
            let downloadFile = this.base_url + '/system/downloadFile?fileName=' + item.fileName + '&filePath=' + item.filePath
            window.location.href = downloadFile
            return
        },
        resetQuery(){
            this.queryParams.noticeTitle = ''
            this.Getnoticemylist()
        },
        Getnoticemylist(){
            this.loading = true;
            noticemylist(this.queryParams).then(res=>{
                this.tableData = res.rows
                this.total = res.total
                this.loading = false;
            })
        },
        // 查看详情，并标识为已读
        details(item){
            systemnotice(item.noticeId).then(res=>{
                this.detailsData = res.data
                this.dialogVisible = true
                noticeread(item.noticeId).then(ress=>{
                    this.$store.commit('initWebSockets',ress.data)
                    this.Getnoticemylist()
                })
            })
            return
        },
        // 删除通知
        deletes(row){
            const noticeIds = row.readId || this.ids;
            this.$confirm(
                '是否确认删除公告编号为"' + noticeIds + '"的数据项?',
                "警告",
                {
                    confirmButtonText: "确定",
                    cancelButtonText: "取消",
                    type: "warning",
                }
            )
                .then(function () {
                    return noticeRead(noticeIds);
                })
                .then(() => {
                    this.Getnoticemylist();
                    this.msgSuccess("删除成功");
                });
        }
    }
}
</script>
